In this beginner friendly video series we will create a Flutter chat application from scratch. In this video we focus on the design of our application, building the UI, and laying down a foundation. In the next video we'll connect to our https://getstream.io/ API.

Source code and instructions: https://github.com/HayesGordon/chatter

Stream Flutter Tutorial: https://gstrm.io/getting-started-flutter

Gordon's Twitter: https://twitter.com/gordonphayes

Stream's Twitter: https://twitter.com/getstream_io

Series Playlist: https://www.youtube.com/playlist?list=PLNBhvhkAJG6sH7dkmwt4BiCclFkMoXq4r

---

Timestamps:

0:00 Intro
2:20 Installation, setup and themes
9:12 Home screen
13:50 Google fonts
16:30 Dark mode
18:20 Bottom navigation bar
44:34 ValueNotifier and ValueListenableBuilder
49:00 Opaque HitTestBehaviour
55:42 AppBar
01:01:08 Avatar
01:08:47 Custom icon button
01:15:37 Stories ListView.builder
01:29:18 CustomScrollView and SliverList
01:33:14 Message tile and data
01:46:45 UI touch ups
01:52:45 Glowing action button
02:00:08 ChatScreen navigation
02:03:53 ChatScreen UI
02:18:00 Closing

---